<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style type="text/css">
        div#container { width: 500px; background-color: aliceblue }
        div#menu { background-color: #ff863a; padding: 4px; width: 150px; float: left}
        div#content {background-color: azure; width: 300px; float: left}
        div#footer {text-align: center; clear: both}
    </style>
</head>
<body>
<div id="container">
    <div id="header">
        <h1>主Title</h1>
    </div>
    <div id="menu">
        <h2>Menu</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </div>
    <div id="content">
        <p>内容</p>
    </div>
    <div id="footer">
        版权说明
    </div>
</div>
</body>
</html>